<template>

  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/admin' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>老人套餐关联</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card style="float: left ;width: 1200px;height: 100%;margin: 10px">
      <el-divider content-position="left">老人套餐关联表格</el-divider>
      <el-button  icon="el-icon-edit"
                  type="warning"  @click="openAddNewDialog()">添加关联</el-button>




      <!--  老人套餐关联表格  -->


      <el-table  ref="multipleTable"
                 tooltip-effect="dark"
                 style="width: 100%"
                 border
                 :data="olderFoodPackageLinkArr">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="编号" width="70"></el-table-column>
        <el-table-column prop="olderName" label="老人姓名"></el-table-column>
        <el-table-column label="套餐名称" width="300" align="center">
          <template slot-scope="scope">
            <p  v-if="scope.row.foodPackageName==null"> (该老人还没有绑定套餐)</p>
            <el-button type="danger" round v-if="scope.row.foodPackageName!=null" @click="openFoodPackageInfo(scope.row)">{{scope.row.foodPackageName}}</el-button>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <!--自定义列必须添加template标签 以及slot-scope="scope"
          scope是定义的一个变量名称, 此变量里面装着当前行的相关信息
          scope.$index当前行对应的数组下标
          scope.row当前行对应的数组里面的对象
          -->
          <template slot-scope="scope">
            <el-button size="mini" type="warning" v-if="scope.row.foodPackageName!=null"
                       @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button size="mini" type="info" icon="el-icon-delete" v-if="scope.row.foodPackageName!=null"
                       @click="openDeleteConfirm(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

<!--    弹出的套餐信息表-->


    <el-dialog title= "套餐信息"  :visible.sync="foodPackageInfoVisible">
      <el-row gutter="15" style="text-align: center">
        <el-col span="8" v-for="item in foodPackageInfo">
          <div style="width: 230px; text-align: center; margin-bottom: 30px">
            <img style="border-radius: 50%;margin: 0 auto;border-color: #E6A23C;border-style: solid;border-width: 3px" :src="require('../../../assets/food/'+item.foodUrl)" width="100" height="100"/>
            <p style="font-size: 15px;font-weight: bold;color: #E6A23C">{{item.foodName}}</p>
            <p style="font-size: 15px;font-weight: bold;color: #bdbcb1">价格(元):{{item.foodPrice}}</p>
            <p style="font-size: 15px;font-weight: bold;color: #E6A23C">{{item.meal}}</p>
          </div>
        </el-col>
      </el-row>
    </el-dialog>

<!--弹出的新增关联的表格-->
    <el-dialog title= "新增老人套餐关联"  :visible.sync="addNewFormVisible">
      <el-form :model="addNewForm" :rules="rules" ref="addNewForm" >
        <el-form-item label="老人选择" prop="olderId" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="addNewForm.olderId">
            <el-option v-for="a in olderArr"
                       :label="a.name" :value="a.id"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="套餐选择" prop="foodPackageId" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="addNewForm.foodPackageId">
            <el-option v-for="c in foodPackageArr"
                       :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="warning" @click="addNewSubmitForm('addNewForm')">新增老人套餐关联</el-button>
        <el-button @click="addNewFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--    弹出的修改关联的表单-->

    <el-dialog title= "修改老人餐品关联"  :visible.sync="editdialogVisible">
      <el-form :model="editForm" :rules="rules" ref="editForm" label-width="80px">
        <el-form-item label="老人选择" prop="olderId" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="editForm.olderId">
            <el-option v-for="c in olderArr"
                       :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="套餐选择" prop="foodPackageId" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="editForm.foodPackageId">
            <el-option v-for="c in foodPackageArr"
                       :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="success" @click="updateForm('editForm')">修改关联</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>






  </div>

</template>

<script>
export default {
  data:function (){
    return{
      editForm:{id:'',olderId:'',foodPackageId:''},
      editdialogVisible:false,
      foodPackageArr:[],
      olderFoodPackageLinkArr:[],
      foodPackageInfoVisible:false,
      foodPackageInfo:[],
      formLabelWidth: '120px',
      addNewFormVisible:false,
      addNewForm:{olderId:'',foodPackageId:''},
      olderArr:[],
      rules: {
        foodPackageId: [{ required: true, message: '请输入套餐名称', trigger: 'blur' }],
        olderId:[{ required: true, message: '请输入老人', trigger: 'blur' }],
      },

    }

  },
  methods:{
    openDeleteConfirm(OlderFoodPackageLink){
      console.log(OlderFoodPackageLink);
      let message = '此操作将老人:" '+OlderFoodPackageLink.olderName+' "与套餐" ' + OlderFoodPackageLink.foodPackageName+ ' "关联删除，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(OlderFoodPackageLink);
      }).catch(() => {
      });

    },
    handleDelete(forName){
      console.log(forName);
      let url = 'http://localhost:8080/food-packages/link/' + forName.id + "/delete";
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      )
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.loadFoodPackageLinkList();
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadFoodPackageLinkList();
            }
          });

        } else {
          this.$message.error(responseBody.message);
        }
      });


    },
    openEditDialog(OlderfoodPackage){
      this.editdialogVisible = true;
      let url = 'http://localhost:8080/food-packages/link/' + OlderfoodPackage.id;
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      )
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.editForm = responseBody.data;
          console.log("修改的对象:{}",this.editForm);
        } else {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadFoodPackageLinkList();
            }
          });
        }
      });

    },

    loadFoodPackageLinkList(){
      let url = 'http://localhost:8080/food-packages/link/list';
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      ).get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.olderFoodPackageLinkArr = responseBody.data;
        }
        console.log(this.olderFoodPackageLinkArr)
      });
    },
    loadOlderList(){
      let url = 'http://localhost:8080/olders';
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      ).get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.olderArr = responseBody.data;
        }
        console.log(this.olderArr)
      });
    },
    loadFoodPackageList(){
      let url = 'http://localhost:8080/food-packages/list';
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      ).get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.foodPackageArr = responseBody.data;
        }
        console.log("套餐数组:{}",this.foodPackageArr)
      });
    },
    openFoodPackageInfo(foodPackage){
      this.foodPackageInfoVisible = true;
      let url = 'http://localhost:8080/food-packages/link/food_package/' + foodPackage.foodPackageId;
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      )
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.foodPackageInfo = responseBody.data;
          console.log("查询的对象:{}",this.foodPackageInfo);

        } else {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadFoodPackageLinkList();
            }
          });
        }
      });
    },
    updateForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/food-packages/link/update';
          console.log('url = ' + url);
          let formData = this.qs.stringify(this.editForm);
          console.log('formData = ' + formData);

          this.axios.create(
              {
                headers:{
                  "Authorization":localStorage.getItem("jwt")
                }
              }
          )
              .post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.loadFoodPackageLinkList();
              this.editdialogVisible = false;
              this.$message({message: '修改关联成功！', type: 'success'});
            } else {
              this.$message.error(responseBody.message);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },

    openAddNewDialog(){
      this.addNewFormVisible=true;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    addNewSubmitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/food-packages/link/add-new';
          console.log('url = ' + url);
          console.log('addNewForm={}', this.addNewForm)
          let formData = this.qs.stringify(this.addNewForm);
          console.log('formData = ' + formData);
          this.axios.create(
              {
                headers:{
                  "Authorization":localStorage.getItem("jwt")
                }
              }
          )
              .post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.$message({
                message: '关联提交成功！',
                type: 'success'
              });
              this.resetForm(formName);
              this.addNewFormVisible=false;
              this.loadFoodPackageLinkList();
            } else {
              this.$message.error(responseBody.message);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    }


  },
  mounted() {
    this.loadFoodPackageLinkList();
    this.loadFoodPackageList();
    this.loadOlderList();

  }


}
</script>

<style scoped>

</style>